<template>
  <view class="register-page">
    <!-- 标题 -->
    <view class="title">用户注册</view>
    
    <!-- 表单区域 -->
    <view class="form">
      <!-- 手机号输入 -->
      <input 
        type="number" 
        v-model="phone" 
        placeholder="请输入11位手机号" 
        maxlength="11"
        class="input"
      />
      
      <!-- 密码输入 -->
      <input 
        type="password" 
        v-model="password" 
        placeholder="请输入密码" 
        class="input"
      />
      
      <!-- 确认密码 -->
      <input 
        type="password" 
        v-model="confirmPassword" 
        placeholder="请确认密码" 
        class="input"
      />
      
      <!-- 注册按钮 -->
      <button class="btn" @click="handleRegister">注册</button>
    </view>
    
    <!-- 登录链接 -->
    <view class="login-link">
      <text>已有账号？</text>
      <text @click="goToLogin" class="link">去登录</text>
    </view>
  </view>
</template>

<script>
	import config from "@/Config.js";
export default {
  data() {
    return {
      phone: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      // 验证手机号长度是否为11位
      if(this.phone.length !== 11) {
        uni.showToast({
          title: '请输入11位手机号',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 验证密码长度
      if(this.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 简单验证
      if( !this.confirmPassword) {
        uni.showToast({
          title: '请输入确认密码',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      if(this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 注册逻辑
      uni.showLoading({ 
        title: '注册中...',
        mask: true  // 添加遮罩防止用户重复点击
      })
      
      uni.request({
        url:config.config+ '/user',
        method: 'POST',
        data: {
          "username": this.phone,
          "password": this.password,
        },
        success: (res) => {
          uni.hideLoading()
          
          // 注册成功提示
          uni.showToast({
            title: '注册成功！即将跳转到登录页面',
            icon: 'success',
            duration: 2000
          })
          
          // 2秒后跳转到登录页面
          setTimeout(() => {
            this.goToLogin()
          }, 2000)
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('添加失败', err)
          uni.showToast({
            title: '注册失败：' + (err.errMsg || '请检查网络后重试'),
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.register-page {
  padding: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin: 60rpx 0;
}

.form {
  margin-bottom: 60rpx;
}

.input {
  height: 90rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.btn {
  background-color: #007aff;
  color: white;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 8rpx;
  margin-top: 20rpx;
  font-size: 32rpx;
}

.login-link {
  text-align: center;
  color: #666;
  font-size: 28rpx;
}

.link {
  color: #007aff;
  margin-left: 10rpx;
}
</style>